<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .page {
            width: 500px;
            height: 40px;
        }

        .page button {
            float: left;
            margin-left: 5px;
            width: 80px;
            height: 40px;
        }

        .page .content {
            float: left;
        }

        .page .content .item {
            float: left;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-left: 5px;
            background-color: black;
            color: burlywood;
            cursor: pointer;
        }

        .page .content .active {
            color: red;
        }
    </style>
</head>

<body>
    <div class="page" id="page">
        <!-- <button>上一页</button>
        <div class="content">
            <div class="item active">01</div>
            <div class="item">02</div>
            <div class="item">03</div>
            <div class="item">04</div>
            <div class="item">05</div>
        </div>
        <button>下一页</button> -->
    </div>
</body>
<script>
    function Page(option) {
        this.ele = document.querySelector(option.ele);
        this.ele.className = "page";
        this.data = option.data;//表示所有的数据
        this.pageIndex = 1;//默认选中的是第一页
        this.methods = option.methods;//所以回调的方法
        this.create();
        this.bindData();
        // this.bindEvevt();
    }

    // Page.prototype.bindEvevt = function () {
    //     let that = this;

    //     if (this.pageIndex != this.allpage) {

    //         this.nextBtn.onclick = function () { //下一页
    //             that.pageIndex++;
    //             that.bindData();
    //         }
    //     }

    //     if (this.pageIndex != 1) {

    //         this.prevBtn.onclick = function () {
    //             that.pageIndex--;
    //             that.bindData();
    //         }
    //     }

    // }

    Page.prototype.bindData = function () {//绑定数据

        let that = this;
        this.allpage = Math.ceil(this.data.total / this.data.shownum);

        let start = 1;

        //假如 总数是101 每页显示10条  总页码是11  11>5         显示1到5页
        //     总数是11  每页显示10条  总页码是2   2>5 不成立   显示1到2
        let end = this.allpage > this.data.showpage ? this.data.showpage : this.allpage;

        //开头和结尾
        //当pageIndex小于3      显示    1  2  3  4  5
        //当pangeIndex大于3     显示    2  3  4  5  6

        //当页码在中间的时候
        this.middleNum = Math.ceil(this.data.showpage / 2);//5/2  中间数据为3
        if (this.pageIndex > this.middleNum) {
            start = this.pageIndex - this.middleNum + 1 //4-3+1
            end = this.pageIndex + this.middleNum - 1; //4+3-1 
        }

        //当页码在末尾的时候
        if (this.pageIndex > this.allpage - this.middleNum) {
            start = this.allpage - this.data.showpage + 1;
            end = this.allpage;
        }

        start = start > 1 ? start : 1; //开头处理，如果总数小于每页显示的数时


        //动态生成数据
        this.content.innerHTML = ""; //每次生成新的之前先将旧的清空
        for (let i = start; i <= end; i++) {
            let item = document.createElement("div");
            if (this.pageIndex == i) {
                item.className = "item active";
            } else {
                item.className = "item";
            }

            item.innerHTML = i;

            item.onclick = function() {//点击后改变pageIndex,重新生成
                that.pageIndex = i;
                that.bindData();
            }
            this.content.appendChild(item);

        }

        //做一个事件绑定的判断  最开始都不能点击
        this.prevBtn.disabled = true;
        this.nextBtn.disabled = true;
        this.nextBtn.onclick = null;
        this.prevBtn.onclick = null;

        //每次生成之后判断
        if (this.pageIndex != this.allpage) { //如果页标不等于最后一页

            this.nextBtn.disabled = false;
            this.nextBtn.onclick = function () { //下一页
                that.pageIndex++;
                that.bindData();
            }
        }

        if (this.pageIndex != 1) {//如果页标不等于第一页

            this.prevBtn.disabled = false;
            this.prevBtn.onclick = function () { //上一页
                that.pageIndex--;
                that.bindData();
            }
        }

        //如果有回调函数，则调用cb
        if(this.methods.cb) {
            this.methods.cb(this.pageIndex);
        }

    }

    Page.prototype.create = function () { //生成结构

        this.prevBtn = document.createElement("button");
        this.prevBtn.innerHTML = "上一页";
        this.ele.appendChild(this.prevBtn);

        this.content = document.createElement("div");
        this.content.className = "content";
        this.ele.appendChild(this.content);

        this.nextBtn = document.createElement("button");
        this.nextBtn.innerHTML = "下一页";
        this.ele.appendChild(this.nextBtn);

    }

    new Page({
        ele: "#page",
        data: {
            total: 111,//数据总数是100
            shownum: 10,//表示每页显示10条数据
            showpage:5,//表示连续的页码数为5
        },
        methods: {
            cb: (index) => {
                console.log(`去请求第${index}页的数据`);
            }
        }
    });
</script>

</html>